<template>
  <div>
    <h1>state</h1>
    <!-- <h2>{{ $store.state.user.username }}</h2> -->
    <h2>{{ username }}</h2>
    <h2>{{ age }}</h2>
    <hr />
    <h1>mutations</h1>
    <button @click="$store.commit('user/updateName', 'chann')">
      updateName
    </button>
    <hr />
    <h1>getters</h1>
    <!-- <h2>{{ $store.getters["user/userGetters"] }}</h2> -->
    <h2>userGetters:{{ userGetters }}</h2>
    <hr />
    <h1>mutations</h1>
    <h2>主文件的count:{{ $store.state.count }}</h2>
    <h2>user的num:{{ $store.state.user.num }}</h2>
    <!-- <button @click="$store.commit('user/increment')">user/increment</button> -->
    <!-- <button @click="$store.commit('increment')">increment</button> -->
    <button @click="increment">user/increment</button>
    <hr />
    <button @click="$store.dispatch('user/userActionsRoot')">root:true</button>
    <!-- <button @click="$store.dispatch('user/userActions')">userActions</button> -->
    <button @click="userActions">userActions</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState({
      username: (state) => state.user.username,
      age: (state) => state.user.userAge,
    }),
    ...mapGetters({
      userGetters: "user/userGetters",
    }),
  },
  methods: {
    ...mapMutations({
      increment: "user/increment",
    }),
    ...mapActions({
      userActions:"user/userActions"
    }),
  },
};
</script>

<style lang="scss" scoped>
</style>